@import "./px2vw";
@import "./common";
header{
    @include head_fixed;
    height: vw(130);
    padding: 0 vw(20);
    ul{
        width: vw(710);
        height: vw(124);
        line-height: vw(124);
        @include flex-b;
        padding-top: vw(29);
        // 返回按钮
        .back{
            // margin-left: vw(23);
            input{
                width: vw(123);
                height: vw(56);
                background-color: #ffffff;
                border: 1px solid #ff9344;
                border-radius: vw(17);
                font-size: vw(26);
            }
        }
        li:nth-of-type(2){
            font-size: vw(26);
        }
        li:last-of-type{
            img{
                display: block;
                width: vw(52);
                height: vw(50);
            }
        }
    }
}
.main{
    height: vw(1100);
    margin: vw(130) auto 0;
    padding: 0 vw(22);
    .banner{
         text-align: center;
        img{
            display: block;
            width: vw(705);
            height: vw(260);
           
        }
        h2{
            @include flex-b;
            height: vw(135);
            padding: 0 vw(20);
            p{
                font-size: vw(72);
                color: #ff9344;
            }
            input{
                width: vw(111);
                height: vw(59);
                background: #ff9344;
                color: #ffffff;
                font-size: vw(30);
                border-radius: vw(27);
            }
        }
        h3{
            @include flex-b;
            height: vw(62);
            line-height: vw(62);
            padding: 0 vw(20);
            font-size: vw(30);
            img{
                display: inline-block;
                width: vw(38);
                height: vw(36);
                vertical-align: center;
                margin-right: vw(14);
            }
            span{
                color: #ff9344;
            }
            a{
                color: #8e8e8e;
                font-size: vw(26);
            }
        }
    }
    .Shops{
        padding: 0 vw(20);
        >h2{
            @include flex-b;
            height: vw(67);
            background-color: #ff9344;
            padding: 0 vw(10);
            p{
                font-size: vw(30);
                color: #ffffff;
            }
            a{
                font-size: vw(46);
                color: #ffffff;
            }
        }
        ul{
            li{
                height: vw(176);
                @include flex-b;
                margin-top: vw(10);
                .left{
                    width: vw(177);
                    height: 100%;
                    position:relative;
                    .cover{
                        position:absolute;
                        bottom:vw(47);
                        left: 0;
                        width: vw(177);
                        height: vw(39);
                        line-height: vw(39);
                        text-align: center;
                        background-color: rgba(177, 176, 175,0.8);
                        font-size: vw(28);
                    }
                }
                .right{
                    position: relative;
                    width: vw(464);
                    height: 100%;
                    h2{
                        font-size: vw(30);
                    }
                    h3{
                        margin-top: vw(10);
                        display: flex;
                        .star{
                            width: vw(180);
                            height: vw(34);
                            background-image: url(../images/detils/形状16.jpg);
                            background-size: vw(36) vw(34);
                            background-repeat: repeat-x;
                        }
                        span{
                            font-size: vw(26);
                            color: #b1b1b1;
                        }
                    }
                    h4{
                        margin-top: vw(10);
                        font-size: vw(24);
                        color: #b1b1b1;
                    }
                    p{
                        margin-top: vw(10);
                        a{
                            font-size: vw(20);
                            color: #ff9344;
                        }
                    }
                    input{
                        position: absolute;
                        right: 0;
                        top: vw(67);
                        width: vw(111);
                        height: vw(58);
                        line-height: vw(58);
                        text-align: center;
                        background: #ff9344;
                        color: #ffffff;
                        border-radius: vw(27);
                        font-size: vw(30);
                    }
                }
                &:first-of-type .left{
                    background-image: url(../images/detils/图层2.jpg);
                    background-size: contain;
                }
                &:nth-of-type(2) .left{
                    background-image: url(../images/detils/图层3.jpg);
                    background-size: contain;
                }
                &:last-of-type .left{
                    background-image: url(../images/detils/图层4.jpg);
                    background-size: contain;
                }
            }
        }
    }
}